.search {
  padding: 10px;
  width: 100%;
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #48b2e0;
  border-radius: 5px;
  background-image: url('https://img.3dmgame.com/uploads/images/news/20231229/1703822710_622040.png');
  background-size: cover;
  background-position: center;

  .top {
    width: 100%;
    height: 40px;
    display: flex;



    .inpUl {
      width: auto;
      height: 100%;

      li {
        height: 100%;
        width: 100px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px 5px 0 0;
        transition: all 0.2s ease;
        cursor: pointer;

        &.active {
          background-color: #f2f2f2;
        }
      }
    }

  }

  .inp {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;

    input {
      width: 100%;
      height: 100%;
      background-color: #f2f2f2;
      border: none;
      outline: none;
      text-indent: 2em;
      color: #737b82;
      border-radius: 0 5px 5px 5px;

      &::placeholder {
        color: #d2d2d2;
      }
    }

    .icon-sousuo {
      position: absolute;
      right: 5px;
      width: 50px;
      height: 80%;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #000;
      color: #fff;
    }
  }
}